<template>
	<BasicModal v-bind="$attrs" z-index="1000" @register="registerModal" title="管理退改规则" @ok="confirmSelect">
		<!-- 表格管理数据，这里直接新增、修改、删除 -->
		<a-row>
			<a-col :span="24">

				<!-- 	<BasicTable :columns="columns" :dataSource="data2" :pagination="pagination"
					@columns-change="handleColumnChange">
				</BasicTable> -->
				<BasicTable @register="registerTable" :rowSelection="rowSelection">
					<!--插槽:table标题-->
					<template #tableTitle>
						<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
					</template>
					<template #action="{ record }">
						<TableAction :actions="getTableAction(record)" />
					</template>
				</BasicTable>
			</a-col>
		</a-row>

		<addRefundOrUpdate z-index="1000" @register="registerAddModal" @successConfirm="successConfirm" />
	</BasicModal>
</template>
<script lang="ts" setup>
	import { defineComponent, ref, watch, inject, unref } from 'vue';
	import { useMessage } from '/@/hooks/web/useMessage';
	import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
	import { BasicTable, ColumnChangeParam, TableAction } from '/@/components/Table';
	import { ArrowUpOutlined, RightOutlined } from '@ant-design/icons-vue';
	import { getRefundOrUpdateRulesColumns } from './tableData';
	import { useListPage } from '/@/hooks/system/useListPage'
	import addRefundOrUpdate from './addRefundOrUpdate.vue';
	const [registerAddModal, { openModal }] = useModal();
	const emit = defineEmits(['register', 'successConfirm']);
	const $message = useMessage();


	let refundOrUpdateRules = ref([] as Array)
	const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
		setModalProps({ zIndex: 1000 })
		refundOrUpdateRules.value = data.refundOrUpdateRules;
	})


	function getBasicColumns2() {

		return refundOrUpdateRules.value
	}

	function handleAdd() {
		openModal(true, {
			isUpdate: false,
			showFooter: true,
		})
	}
	function successConfirm(val, isUpdate) {
		//判断是否有相同日期，如果有则提醒
		let ts = refundOrUpdateRules.value
		//将这个val  push到列表，
		if (!isUpdate) {
			let isRepetition = false
			for (let i = 0; i < ts.length; i++) {
				if (val.sort == ts[i].sort) {
					isRepetition = true
				}
			}

			if (isRepetition) {
				//	弹出提示
				console.log("有相同的排序")
				return $message.createMessage.warning("有相同的排序id")
			}
			//新增
			ts.push(val)
			reload()

		} else {
			//修改
			ts.forEach((self, index) => {
				if (val.sort == self.sort) {
					ts[index] = val
				};
			})
			reload()
		}

	}

	function handleEdit(record : Recordable) {
		//修改，打开modal
		openModal(true, {
			record,
			isUpdate: true,
			showFooter: true,
		})
	}
	function handleDelete(record : Recordable) {
		//移除某天
		let ts = refundOrUpdateRules.value
		ts.forEach((self, index) => {
			if (record.sort == self.sort) {
				ts.splice(index, 1)
			};
		});
		//剩下的就保存起来

	}

	const loading = ref(true);
	const pagination = ref<any>(false);


	const { prefixCls, tableContext } = useListPage({
		tableProps: {
			title: '行车领队分配记录',
			api: getBasicColumns2,
			columns: getRefundOrUpdateRulesColumns(),
			//	showActionColumn: false,//隐藏操作列
			canResize: false,
			formConfig: {
				//labelWidth: 120,
				autoSubmitOnEnter: false,
				showSubmitButton: false,
				showResetButton: false,
				fieldMapToNumber: [
				],
				fieldMapToTime: [
				],
			},
			actionColumn: {
				width: 120,
				fixed: 'right'
			},
		},

	})

	const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext

	function confirmSelect() {
		//将数据返回，
		emit("successConfirm", refundOrUpdateRules.value)
		refundOrUpdateRules.value = []
		closeModal()
	}
	function getTableAction(record) {
		return [
			{
				label: '编辑',
				onClick: handleEdit.bind(null, record),
			},
			{
				label: '删除',
				popConfirm: {
					title: '是否确认删除',
					confirm: handleDelete.bind(null, record),
					placement: 'topLeft',
				}
			}
		]
	}
	function handleColumnChange(data2 : ColumnChangeParam[]) {
		console.log('ColumnChanged', data2);

	}
	setTimeout(() => {
		loading.value = false;
	}, 500);
</script>

<style>
	.jeecg-basic-table-form-container .ant-form,
	.jeecg-basic-table-form-container {
		padding: 0;
		margin-bottom: 0;
	}
</style>